import React, { useState } from 'react';
import { PageContainer } from '@ant-design/pro-components';
import { Card, Form, Input, Button, Avatar, Upload, message } from 'antd';
import { UserOutlined, UploadOutlined } from '@ant-design/icons';

const UserProfile: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 模拟用户数据
  const initialValues = {
    username: 'admin',
    name: '管理员',
    email: 'admin@example.com',
    phone: '13800138000',
  };

  const onFinish = (values: any) => {
    setLoading(true);
    // 这里应该调用API保存用户信息
    setTimeout(() => {
      message.success('个人信息更新成功');
      setLoading(false);
    }, 1000);
  };

  const uploadProps = {
    name: 'avatar',
    action: '/api/upload', // 实际上传地址
    headers: {
      authorization: 'authorization-text',
    },
    showUploadList: false,
    onChange(info: any) {
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

  return (
    <PageContainer>
      <Card bordered={false}>
        <div style={{ display: 'flex', marginBottom: 24 }}>
          <div style={{ marginRight: 24 }}>
            <Avatar size={100} icon={<UserOutlined />} />
            <Upload {...uploadProps} style={{ marginTop: 16 }}>
              <Button icon={<UploadOutlined />}>更换头像</Button>
            </Upload>
          </div>
          <div style={{ flex: 1 }}>
            <Form
              form={form}
              layout="vertical"
              initialValues={initialValues}
              onFinish={onFinish}
            >
              <Form.Item
                name="username"
                label="用户名"
                rules={[{ required: true, message: '请输入用户名' }]}
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                name="name"
                label="姓名"
                rules={[{ required: true, message: '请输入姓名' }]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                name="email"
                label="邮箱"
                rules={[
                  { required: true, message: '请输入邮箱' },
                  { type: 'email', message: '请输入有效的邮箱地址' },
                ]}
              >
                <Input />
              </Form.Item>
              <Form.Item
                name="phone"
                label="手机号"
                rules={[
                  { required: true, message: '请输入手机号' },
                  { pattern: /^1\d{10}$/, message: '请输入有效的手机号' },
                ]}
              >
                <Input />
              </Form.Item>
              <Form.Item>
                <Button type="primary" htmlType="submit" loading={loading}>
                  保存
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </Card>
    </PageContainer>
  );
};

export default UserProfile;
